<template>
  <div id="register" class="clearfix">
    <div class="head">
      <h1 class="icon">
      </h1>
    </div>
      <Dialog>
        <template v-slot:body>
          <el-form  :model="form" :rules="rules" ref="form">
            <el-form-item class="linkBlock">
              <router-link to="/login" class="link">
                登录
              </router-link>
            </el-form-item>
            <el-form-item prop="username">
              <div class="username">
                <p>用户名</p>
                <el-input type="text" v-model="form.username"  placeholder="请输入用户名">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item prop="password">
              <div class="password">
                <p>密码</p>
                <el-input type="password" v-model="form.password"  placeholder="请输入密码">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item prop="repassword">
              <div class="repassword">
                <p>密码</p>
                <el-input type="password" v-model="form.repassword" placeholder="请输入密码">
                </el-input>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button class="regestButton" @click="register">注册</el-button>
            </el-form-item>
          </el-form>
        </template>
      </Dialog>
  </div>
</template>

<script>
import Dialog from '@/components/LoginRegisterDialog/LoginRegisterDialog.vue'
export default {
  components: {
    Dialog
  },
  data () {
    const password2 = (rule, value, callback) => {
      if (value !== this.form.password) {
        callback(new Error('两次输入密码不一致!'))
        return false
      } else {
        callback()
      }
    }

    return {
      form: {
        username: '',
        password: '',
        repassword: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入用户名', trigger: ['blur', 'change'] },
          { pattern: /^\w{1,10}$/, message: '用户名长度为1~10', trigger: ['blur', 'change'] }
        ],
        password: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { pattern: /^\w{6,15}$/, message: '密码长度为6~15', trigger: ['blur', 'change'] }
        ],
        repassword: [
          { required: true, message: '请输入密码', trigger: ['blur', 'change'] },
          { validator: password2, trigger: ['blur', 'change'] },
          { pattern: /^\w{6,15}$/, message: '密码长度为6~15', trigger: ['blur', 'change'] }
        ]
      }
    }
  },
  methods: {
    async register () {
      // 登陆时先校验校验通过发请求，校验失败重置表单
      // console.log('点了')
      try {
        await this.$refs.form.validate()
        const res = await this.$store.dispatch('user/registerAction', this.form)
        if (res.code) {
          alert(res.message)
          this.form = {
            username: '',
            password: '',
            repassword: ''
          }
          return
        }
        this.form = {
          username: '',
          password: '',
          repassword: ''
        }
        this.$router.push('/login')
      } catch (e) {
        console.log(e)
      }
    }
  }
}
</script>

<style lang='less' scoped>
  #register{
    width: 100%;
    height: 100%;
    background: url(./assets/img/登录注册bg@2x.png) no-repeat center/cover ;
    &.clearfix::before,
    &.clearfix::after {
      content: "";
      display: table;
    }
    &.clearfix::after {
      clear: both;
    }

    .head{
      margin: 50px 30px;
      .icon{
        width: 110px;
        height: 48px;
        background: url(./assets/img/登录页logo@2x.png) no-repeat center/cover ;
      }
    }
    .linkBlock{
      margin: 0 auto 40px;
    }
    .link{
      display:block;
      text-align: center;
      color: #1E5EFF ;
      font-size: 16px;
      &:hover{
        color: #4F81FF ;
      }
    }
    .regestButton{
      padding: 12px;
      width: 420px;
      height: 48px;
      background: #4F81FF;
      color:#FFF;
      font-size: 16px;
      cursor: pointer;
      &:hover{
        background: #608DFF
      }
    }
  }
</style>
